<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HJR UI - Basic Usage</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="../dist/hjr-ui.umd.js"></script>
    <link rel="stylesheet" href="../dist/style.css">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            margin: 0;
            padding: 20px;
            background: #f5f5f5;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .demo-section {
            margin-bottom: 30px;
        }
        .demo-section h2 {
            color: #333;
            border-bottom: 2px solid #667eea;
            padding-bottom: 10px;
        }
        .demo-row {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            align-items: center;
            margin: 15px 0;
        }
        .input-demo {
            width: 300px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <h1>HJR UI - Basic Usage Example</h1>
            
            <div class="demo-section">
                <h2>Buttons</h2>
                <div class="demo-row">
                    <hjr-button>Default Button</hjr-button>
                    <hjr-button type="primary">Primary Button</hjr-button>
                    <hjr-button type="success">Success Button</hjr-button>
                    <hjr-button type="warning">Warning Button</hjr-button>
                    <hjr-button type="danger">Danger Button</hjr-button>
                </div>
                <div class="demo-row">
                    <hjr-button size="small">Small Button</hjr-button>
                    <hjr-button size="medium">Medium Button</hjr-button>
                    <hjr-button size="large">Large Button</hjr-button>
                </div>
                <div class="demo-row">
                    <hjr-button disabled>Disabled Button</hjr-button>
                </div>
            </div>

            <div class="demo-section">
                <h2>Inputs</h2>
                <div class="demo-row">
                    <div class="input-demo">
                        <hjr-input v-model="inputValue" placeholder="Enter text..."></hjr-input>
                    </div>
                    <div class="input-demo">
                        <hjr-input type="password" placeholder="Enter password..."></hjr-input>
                    </div>
                </div>
                <div class="demo-row">
                    <div class="input-demo">
                        <hjr-input disabled placeholder="Disabled input"></hjr-input>
                    </div>
                    <div class="input-demo">
                        <hjr-input readonly value="Readonly input"></hjr-input>
                    </div>
                </div>
                <p>Input value: {{ inputValue }}</p>
            </div>

            <div class="demo-section">
                <h2>Cards</h2>
                <div class="demo-row">
                    <hjr-card title="Sample Card" style="width: 300px;">
                        <p>This is a sample card component with some content.</p>
                        <p>You can put any content here.</p>
                        <template #footer>
                            <hjr-button type="primary" size="small">Action</hjr-button>
                        </template>
                    </hjr-card>
                </div>
            </div>
        </div>
    </div>

    <script>
        const { createApp } = Vue;
        
        createApp({
            data() {
                return {
                    inputValue: ''
                }
            }
        }).use(HjrUI).mount('#app');
    </script>
</body>
</html>
